import React, { useState } from 'react'

export default function UserStateDemo () {
  /**
   * useState 得到的是一个数组，该数组可以解构
   * 值1：模型名
   * 值2：它的名字一般以set 加上第一个值的名称的首字母大写（规定），它是用来更改模型值
   */
  const [count, setCount] = useState(100)
  const [username, setUsername] = useState('admin')
  const [persons, setPersons] = useState([])

  // 模拟发送网络请求
  setTimeout(() => {
    setPersons([
      { id: 1001, name: 'czy', sex: '男' },
      { id: 1002, name: 'cy', sex: '女' },
      { id: 1003, name: 'cz', sex: '男' }
    ])
  }, 1000)
  return (
    <div>
      <p>count is {count}</p>
      <p>
        <button onClick={() => setCount(count + 1)}>add</button>
      </p>
      <p>
        <span>username is {username}</span>
        <br />
        <input
          type='text'
          value={username}
          onChange={e => setUsername(e.target.value)}
        />
      </p>
      <ul>
        {persons.map(item => {
          return (
            <li key={item.id}>
              {item.id} {item.name} {item.sex}{' '}
            </li>
          )
        })}
      </ul>
    </div>
  )
}
